<template>
	<view class="d-top">
		<image :src="getImg(detail.shopLog)" mode="widthFix"></image>
		<uni-icons type="left" size="30" @click="goBack" class="d-top-icon"></uni-icons>
	</view>
	<view class="d-middle">
		<view class="d-middle-top">
			<view class="d-middle-name">{{detail.shopName}}ELO SAEN</view>
			<view class="d-middle-type">
				<text>经济型</text>
			</view>
		</view>
		<view class="d-middle-rem">2021年装修/888套餐/999套餐/000套餐</view>
		<view class="d-middle-bottom">
			<view class="d-bottom-score">
				<view style="display: flex;justify-content: space-between;">
					<view class="d-score-bubble">非常好</view>
					<text class="d-score-text">6667条</text>
					<view class="d-score-image">
						<image src="@/static/right-arrow.png"></image>
					</view>
				</view>
				<view class="d-bottom-cont">
					“托尼老师手艺不错，下次还会再来”
				</view>
			</view>
			<view class="d-bottom-addr">
				<view class="d-bottom-addr-distance">
					<span>距离未来方舟D11组团-出入口步行大约210m，约3分钟</span>
					<view style="opacity: 0.8;margin-top: 20rpx;">{{detail.address}}</view>
				</view>
				<view class="d-bottom-map">
					<image @click="goMap" src="@/static/icon-map.png"></image>
					<view style="font-size: 20rpx;margin-left: 10rpx;">地图</view>
				</view>
			</view>
		</view>
	</view>
	<view class="d-cont">
		<view class="d-cont-title">
			<view style="padding-top: 3px;margin-left: -15rpx">
				本店特色
			</view>
		</view>
		<view class="d-cont-img">
			<block v-for="(item,index) in detail.advertises">
				<image :src="getImg(item)" mode="aspectFit"></image>
			</block>
		</view>
		<view class="d-cont-intr">
			我们是一支充满激情和创意的团队，致力于为每一位顾客提供独特而满意的发型设计体验。 我们的理发店环境舒适宜人，装修时尚现代，为您营造轻松愉悦的氛围。我们使用高质量的理发工具和产品，确保您的头发得到最佳的护理和呵护。
			我们的服务项目包括剪发、染发、烫发、护理等，让您一站式解决所有头发问题。我们还提供免费的头发咨询和护理建议，帮助您更好地呵护头发健康。
			如果您正在寻找一家专业而贴心的理发店，那么请光临我们的店铺。我们期待着为您打造出最满意的发型，让您焕发自信和光彩！
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getDetailById
	} from '@/api/index.js'
	import getImgUrl from '@/config/img.js'

	const id = ref(0) // 店铺id
	const detail = ref([]) // 店铺详情

	// 获取店铺详情
	const getDetail = () => {
		getDetailById(id.value).then(res => {
			detail.value = res.data
		})
	}

	// 获取图片地址
	const getImg = (url) => {
		return getImgUrl(url)
	}

	// 地图导航
	const goMap = () => {
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
				const latitude = res.latitude;
				const longitude = res.longitude;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 18,
					success: function() {
						console.log('success');
					}
				});
			}
		});
	}

	// 跳转到上一页
	const goBack = () => {
		uni.navigateBack()
	}

	onLoad(async (e) => {
		id.value = e
		await getDetail()
	});
</script>

<style>
	page {
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
	.d-top {
		width: 100%;
		height: 390rpx;
		overflow: hidden;
		position: relative;
		/*#ifdef H5*/
		image{
			width: 100%;
		}
		/*#endif*/
	}

	.d-top-icon {
		position: absolute;
		top: 60rpx;
		left: 0rpx;
	}

	.d-top image {}

	.d-middle {
		transform: translateY(-120rpx);
		margin: 0px 20rpx;
		height: 402rpx;
		background-color: #fff;
		box-shadow: 0 0 2rpx #BBBBBB;
		border-radius: 20rpx;
	}

	.d-middle-top {
		display: flex;
	}

	.d-middle-name {
		font-size: 40rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
	}

	.d-middle-type {
		width: 121rpx;
		height: 28rpx;
		background-color: #0EDEEA;
		border-radius: 10rpx;
		margin-top: 36rpx;
		margin-left: 20rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.d-middle-rem {
		margin-left: 20rpx;
		margin-top: 20rpx;
		opacity: 0.7;
		font-size: 28rpx;
	}

	.d-middle-bottom {
		display: flex;
	}

	.d-bottom-score {
		background: linear-gradient(#AEFCEF, #fff);
		width: 302rpx;
		height: 190rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.d-bottom-addr {
		display: flex;
		width: 350rpx;
		height: 190rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		background: linear-gradient(#e8d8fb, #fff);
	}

	.d-score-bubble {
		margin: 20rpx;
		width: 72rpx;
		height: 48rpx;
		background-color: #00A3DE;
		border-radius: 50rpx 50rpx 0 50rpx;
		font-size: 20rpx;
		text-align: center;
		padding-top: 10rpx;
		color: #fff;
	}

	.d-score-text {
		margin-left: -20rpx;
		margin-top: 35rpx;
		color: #00A3DE;
		font-size: 22rpx;
	}

	.d-score-image {
		margin-top: 35rpx;
		margin-right: 20rpx;
		width: 25rpx;
		height: 25rpx;
		/*#ifdef H5*/
		image{
			width: 100%;
			height: 100%;
		}
		/*#endif*/
	}

	.d-bottom-cont {
		margin: 0 20rpx;
		color: #00A3DE;
		font-size: 22rpx;
	}

	.d-bottom-addr-distance {
		font-size: 22rpx;
		width: 250rpx;
		margin: 20rpx;
	}

	.d-bottom-map {
		width: 60rpx;
		height: 60rpx;
		margin-top: 38rpx;
		margin-right: 18rpx;
	}

	.d-cont {
		margin: 0 20rpx;
		transform: translateY(-88rpx);
		background-color: #fff;
		border-radius: 20rpx;
	}

	.d-cont-title {
		width: 150rpx;
		height: 48rpx;
		background-color: #fea38e;
		border-radius: 20rpx 0rpx 50rpx 0rpx;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
	}

	.d-cont-img {
		display: flex;
		justify-content: space-around;
	}

	.d-cont-img image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.d-cont-intr {
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 50rpx;
		text-indent: 2em;
		padding: 20rpx 20rpx;
	}
</style>